<template>
    <div class="home">
        <header></header>
       <div v-if="filterList.length">
            <div v-for="item in filterList" :key="item.title">
                {{item.title}}
            </div>
        </div>
        <button 
            v-for="item in 10" 
            :key="item"
            @click="type=item"
        >{{item}}</button>
    </div>
</template>

<script lang='ts'>
// 1 没有办法导入ts
// 2 mockjs 引入有红线
// 3 filterList
// require是commonsjs模块化规范
// import是es6
import {defineComponent, ref,onMounted,Ref,computed} from 'vue'
import Mock from 'mockjs'
// import {List} from '../../interface.ts'; //怎么导入ts

interface FilterList {
    title:string,
    type:number
}
const {mock} = Mock.mock({
    "mock|100": [
        {
            "title":"@title",
            "type|1-10":1
        }
    ]
})
export default defineComponent({
    setup(props, context) {
        let list:Ref<FilterList[]> = ref([]);// 声明一个响应式
        let type: Ref<number> =  ref(1)
        const getList:() => void = () => {
            setTimeout(() => {
                list.value = mock;
            }, 1000);
        }
        // 生命周期结束后获取数据
        onMounted(() => {
            getList()
        })
        // type更新 触发计算属性
        // filteerList则更新
        const filterList:FilterList[] = computed(() => {
            return list.value.filter((item:any) =>{
                return item.type == type.value
            })
        })
        return {
            filterList,
            type
        }
    }
})
</script>

<style>
header {
    height: 74px;
    background: red;
}
</style>